<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./assets/img/favicon.png" type="image/x-icon">
  <title>万圣节前夕</title>
  <!-- 字体图标 -->
  <link href="//cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
  <!-- css -->
  <link rel="stylesheet" href="./assets/css/styles.css">
</head>

<body>
  <!-- 背景- 磨砂质感 -->
  <img src="./assets/img/shape-bg.png" alt="" class="shape-bg">

  <!-- 头部 -->
  <header class="header" id="header">
    <nav class="nav container">
      <a href="#" class="nav-logo">
        <img src="./assets/img/logo-skull.png" alt="logo image">
        Halloween
      </a>

      <div id="nav-menu" class="nav-menu">
        <ul class="nav-list">
          <div class="nav-item">
            <a href="#home" class="nav-link active-link">Home</a>
          </div>
          <div class="nav-item">
            <a href="#about" class="nav-link">About us</a>
          </div>
          <div class="nav-item">
            <a href="#items" class="nav-link">Items</a>
          </div>
          <div class="nav-item">
            <a href="#party" class="nav-link">Party</a>
          </div>
        </ul>
        <div id="nav-close" class="nav-close">
          <i class="ri-close-line"></i>
        </div>
        <img src="./assets/img/nav-bat.png" alt="" class="nav-img">
      </div>

      <div id="nav-toggle" class="nav-toggle">
        <i class="ri-menu-4-line"></i>
      </div>
    </nav>
  </header>

  <!-- 主体 -->
  <main class="main">
    <!-- home -->
    <section id="home" class="home section">
      <div class="shape-small"></div>
      <div class="shape-big"></div>
      <div class="home-container container grid">
        <div class="home-data">
          <h1 class="home-title">
            <span>Halloween</span> Trick Or Treat!!!
            <img src="./assets/img/stars.png" alt="home image" class="home-title-img-1">
            <img src="./assets/img/stars.png" alt="home image" class="home-title-img-2">
          </h1>

          <div class="home-description">
            This Halloween, enjoy trick-or-treating
            with your friends and spend a terrifying
            night under the full moon.
          </div>

          <a href="#" class="button">Explore Now!!!</a>
        </div>
        <img src="./assets/img/home-pumpkin.png" alt="home image" class="home-img">
        <img src="./assets/img/home-tree1.png" alt="home image" class="hom-tree-1">
        <img src="./assets/img/home-tree2.png" alt="home image" class="home-tree-2">
      </div>
    </section>

    <!-- category -->
    <section class="category section">
      <div class="shape-small"></div>
      <h2 class="section-title">
        Choose your <br> spooky category
      </h2>
      <div class="category-container container grid">
        <div class="category-card">
          <img src="./assets/img/category-pumpkin.png" alt="category image" class="category-img">
          <h3 class="category-title">Pumpkins</h3>
          <p class="category-description">Light up horror pumpkins to scare at night</p>
          <img src="./assets/img/stars.png" alt="category image" class="category-star">
        </div>
        <div class="category-card">
          <img src="./assets/img/category-ghost.png" alt="category image" class="category-img">
          <h3 class="category-title">Ghost</h3>
          <p class="category-description">Spooky ghosts to scare in the most haunted houses</p>
          <img src="./assets/img/stars.png" alt="category image" class="category-star">
        </div>
        <div class="category-card">
          <img src="./assets/img/category-witch-hat.png" alt="category image" class="category-img">
          <h3 class="category-title">Witch Hat</h3>
          <p class="category-description">The most elegant witch hats you can wear and scare</p>
          <img src="./assets/img/stars.png" alt="category image" class="category-star">
        </div>
      </div>
    </section>

    <!-- about -->
    <section id="about" class="about section">
      <div class="shape-small"></div>
      <div class="shape-big"></div>
      <div class="about-container container grid">
        <div class="about-data">
          <h2 class="section-title">
            About The Night <br> Of Terror
          </h2>
          <p class="about-description">
            Halloween is celebrated every October 31
            at night, walk around the city with your
            friends and trick or treat, enjoy this
            celebration under the full moon.
          </p>
          <a href="#" class="button">Know More!!!</a>
        </div>
        <img src="./assets/img/about-scare.png" alt="image about" class="about-img">
      </div>
    </section>

    <!-- items -->
    <section id="items" class="items section">
      <h2 class="section-title">
        Select your <br>
        lost item
      </h2>

      <div class="items-container container grid">
        <div class="shape-big"></div>
        <article class="items-card">
          <img src="./assets/img/item-apple.png" alt="image items" class="items-img">

          <h3 class="items-name">Candy Apple</h3>
          <span class="items-price">$4.99</span>

          <button class="items-button">
            <i class="ri-heart-3-line"></i>
          </button>
        </article>
        <article class="items-card">
          <img src="./assets/img/item-broom.png" alt="image items" class="items-img">

          <h3 class="items-name">Witch Broom</h3>
          <span class="items-price">$12.99</span>

          <button class="items-button">
            <i class="ri-heart-3-line"></i>
          </button>
        </article>
        <article class="items-card">
          <img src="./assets/img/item-pumpkin.png" alt="image items" class="items-img">

          <h3 class="items-name">Pumpkin</h3>
          <span class="items-price">$7.99</span>

          <button class="items-button">
            <i class="ri-heart-3-line"></i>
          </button>
        </article>
        <article class="items-card">
          <img src="./assets/img/item-spider.png" alt="image items" class="items-img">

          <h3 class="items-name">Spider</h3>
          <span class="items-price">$9.99</span>

          <button class="items-button">
            <i class="ri-heart-3-line"></i>
          </button>
        </article>
        <article class="items-card">
          <img src="./assets/img/item-witch-hat.png" alt="image items" class="items-img">

          <h3 class="items-name">Witch Hat</h3>
          <span class="items-price">$15.99</span>

          <button class="items-button">
            <i class="ri-heart-3-line"></i>
          </button>
        </article>
      </div>
    </section>

    <!-- party -->
    <section id="party" class="party section">
      <div class="party-container container grid">
        <div class="party-data">
          <h2 class="section-title">
            Halloween <br>
            party 31 October
          </h2>
          <p class="party-description">
            Organize a great Halloween party and
            enjoy the creepiest night of terror with all
            your friends.
          </p>

          <a href="#" class="button">
            Start The Party!!!
          </a>
        </div>
        <div class="party-images">
          <img src="./assets/img/party-cauldron.png" alt="party image" class="party-img">
          <img src="./assets/img/stars.png" alt="party star image" class="party-star-1">
          <img src="./assets/img/stars.png" alt="party star image" class="party-star-2">
        </div>
      </div>
    </section>

  </main>

  <!-- 底部 -->
  <footer class="footer section">
    <div class="shape-small"></div>
    <div class="shape-big"></div>
    <div class="footer-container container grid">
      <div>
        <a href="#" class="footer-logo">
          <img src="./assets/img/logo-skull.png" alt="Logo image">
          Halloween
        </a>

        <p class="footer-description">
          Enjoy the spookiest <br>
          night of your life.
        </p>
      </div>

      <div class="footer-content">
        <div>
          <h3 class="footer-title">About Us</h3>

          <ul class="footer-links">
            <li>
              <a href="#" class="footer-link">About Us</a>
            </li>
            <li>
              <a href="#" class="footer-link">Features</a>
            </li>
            <li>
              <a href="#" class="footer-link">News & Blog</a>
            </li>
          </ul>
        </div>
        <div>
          <h3 class="footer-title">Services</h3>

          <ul class="footer-links">
            <li>
              <a href="#" class="footer-link">Pricing</a>
            </li>
            <li>
              <a href="#" class="footer-link">Discounts</a>
            </li>
            <li>
              <a href="#" class="footer-link">Send a gift</a>
            </li>
          </ul>
        </div>
        <div>
          <h3 class="footer-title">Company</h3>

          <ul class="footer-links">
            <li>
              <a href="#" class="footer-link">Blog</a>
            </li>
            <li>
              <a href="#" class="footer-link">Celebrations</a>
            </li>
            <li>
              <a href="#" class="footer-link">About</a>
            </li>
          </ul>
        </div>
        <div>
          <h3 class="footer-title">Social Media</h3>

          <ul class="footer-social">
            <a href="https://www.facebook.com/" target="_blank" class="footer-social-link">
              <i class="ri-facebook-circle-fill"></i>
            </a>
            <a href="https://www.instagram.com/" target="_blank" class="footer-social-link">
              <i class="ri-instagram-fill"></i>
            </a>
            <a href="https://twitter.com/" target="_blank" class="footer-social-link">
              <i class="ri-twitter-fill"></i>
            </a>
          </ul>
        </div>
      </div>
      <img src="assets/img/footer-tree1.png" alt="footer image" class="footer-tree-1">
      <img src="assets/img/footer-tree2.png" alt="footer image" class="footer-tree-2">
    </div>
    <span class="footer-copy">
      &#169; Copyright Jetwang. All rights reserved
    </span>
  </footer>

  <!-- 返回顶部 -->
  <!--========== scroll up ==========-->
  <a href="#" class="scroll-up" id="scroll-up">
    <i class="ri-arrow-up-line"></i>
  </a>


  <script src="./assets/js/scrollreveal.min.js"></script>

  <script src="./assets/js/main.js"></script>
</body>

</html>